<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<style>
  .main {
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 400px;
    margin: 250px auto;
    padding: 0 30px 30px 30px;
  }
</style>

<body>
  <div class="main">
    <div class="header">
      <a href="/">
        <img src="/public/img/logo.png" alt="">
      </a>
      <h1>用户注册</h1>
    </div>
    <!-- 
      表单具有默认的提交行为，默认是同步的，同步表单提交，浏览器会锁死（转圈）等待服务器响应结果
      表单的 同步提交之后。无论服务端响应的是什么，都会直接用响应的结果覆盖掉当前页面

      后来有人想到一种办法来解决这些问题，在没有ajax出现的时候，服务端来再次渲染一遍该页面，然后采用模板引擎来把一些提示信息渲染上去
      但服务端没法操作dom，不能有更好的提示模式，并且还要再次刷新页面
     -->
    <form id="register_form">
      <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" name="email" id="email" class="form-control" placeholder="Email" autofocus>
      </div>
      <div class="form-group">
        <label for="nickname">昵称</label>
        <input type="text" name="nickname" id="nickname" class="form-control" placeholder="Nickname">
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-success btn-block">注册</button>
    </form>
    <div class="message">
      <p>已有账号？<a href="/login">点击登录</a>.</p>
    </div>
  </div>
  <script src="/node_modules/jquery/dist/jquery.js"></script>
  <script>
    $('#register_form').on('submit', function (e) {
      e.preventDefault();
      let formData = $(this).serialize();
      $.ajax({
        url: '/register',
        type: 'post',
        data: formData,
        dataType: 'json',
        success: function (data) {
          let err_code = data.err_code;
          if (err_code === 0) {
            window.alert("注册成功");
            // 由于异步请求，服务端无法实现重定向，客户端来进行重定向
            window.location.href = '/';
          } else if (err_code === 1) {
            window.alert("邮箱或用户名已存在");
          } else if (err_code === 500) {
            window.alert("服务器忙，请稍后重试");
          }
        }
      })
    })
  </script>
</body>

</html>

<!-- 
  保持登录状态：
  HTTP是无状态的，无法记录下状态
  那么让自己记住自己：
  Cookie，用来保存一些不太敏感的数据,但是不能保存用户的登录状态，一般用来记住用户名，购物车等不太敏感的词
  Session，在服务端保存信息，通过前端发送一个凭据（cookie）来获取登录状态,比较安全，不太容易伪造出来
 -->